第十三天--昨天的Php文法、註冊帳號、登入帳號的畫面(留言板作品)

2023 iThome 鐵人賽

DAY 13

自我挑戰組

基礎前端+後端網站分享之留言板製作系列第 13 篇

15th鐵人賽

aliecele

2023-09-27 08:06:36

352 瀏覽

分享至

接續昨天的程式碼(form_get.php和form_post.php程式碼)，這當中的php是怎麼用做的。

Php文法:

Php文法多類似java和c語言(開發者設計的)。
弱型別，$為變數，字串用””來包裹。
例如:
$name 是一個變數，叫name。
“123”則是一個字串。

如何使用php?

新增php檔，能在檔案內寫html、css、js和php。
在任意地方打，在php後?前打入語法，並以;來結束語法。
例如:
php_exaple.php程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1><?php echo "印出123"; ?></h1>
</body>

</html>

<?php echo "印出123"; ?>

echo "印出123";是php語法。
程式中，
h1/h1 等於 h1印出123"; /h1 ，(我這邊省略<和>在h1左右，加上去文章會識別錯誤)
Php會先轉換成文字作用在檔案上，再根據html的h1語法來顯示。

回到一開始程式碼，

<?php echo $_GET["fname"] . "<br>"; ?>

$_GET是form的Get，要用$_GET去接收，通常在form的 action寫的文件中會出現。
Fname則是input的name名稱。

接下來是註冊帳號、登入帳號的畫面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <title>登入留言板</title>
</head>

<body>
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="Home.php">留言板</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="login.php">登入</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="register.php">註冊</a>
        </li>
    </ul>

    <div class="mt-5">
        <h1 class="mt-5 text-center">登入</h1>

        <div class="form p-3">
            <form action="../php/verify_password.php" method="POST">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">帳號: </span>
                    </div>
                    <input class="form-control" type="text" name="user_name" required="required" value="" placeholder="輸入帳號">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">密碼: </span>
                    </div>
                    <input class="form-control" type="password" name="password" required="required" value="" placeholder="輸入密碼">
                </div>

                <input type="hidden" name="id" value="">
                <input type="submit" class="btn btn-dark" value="登入">


            </form>

        </div>


    </div>
</body>

</html>

<div class="mt-5">
    <h1 class="mt-5 text-center">註冊</h1>

    <div class="form p-3">
        <form action="../php/create_user.php" method="POST">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text text-light bg-dark">帳號: </span>
                </div>
                <input class="form-control" type="text" name="user_name" required="required" value="" placeholder="輸入帳號">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text text-light bg-dark">密碼: </span>
                </div>
                <input class="form-control" type="password" name="password" required="required" value="" placeholder="輸入密碼">
            </div>

            <input type="hidden" name="id" value="">
            <input type="submit" class="btn btn-dark" value="註冊">


        </form>

    </div>


</div>